<template>
	<a-drawer
		:width="500"
		:title="title"
		:visible="visible"
		@close="onClose">
		<div class="drawer-content-box">
			<a-form-model :model="spearEntity" :rules="rules" ref="spearEntity" layout="vertical">
				<a-form-model-item label="枪名称" prop="spearName">
					<a-input v-model:value="spearEntity.spearName" placeholder="请输入枪名称"/>
				</a-form-model-item>
				<a-form-model-item label="枪编号" prop="spearNumber">
					<a-input v-model:value="spearEntity.spearNumber" placeholder="请输入枪编号"/>
				</a-form-model-item>
				<a-form-model-item label="充电功率" prop="power">
					<a-input v-model:value="spearEntity.power" placeholder="请输入充电功率"/>
				</a-form-model-item>
				<a-form-model-item label="电流" prop="current">
					<a-input v-model:value="spearEntity.current" placeholder="请输入电流"/>
				</a-form-model-item>
				<a-form-model-item label="电压" prop="voltage">
					<a-input v-model:value="spearEntity.voltage" placeholder="请输入电压"/>
				</a-form-model-item>
				<a-form-model-item label="所属电站" prop="stationId">
					<a-select placeholder="所属电站" v-model:value="spearEntity.stationId" @change="loadPile">
						<a-select-option :value="station.id" v-for="station in stationEntities">{{station.stationName}}</a-select-option>
					</a-select>
				</a-form-model-item>
				<a-form-model-item label="所属桩体" prop="pileId">
					<a-select placeholder="所属桩体" v-model:value="spearEntity.pileId">
						<a-select-option :value="pile.id" v-for="pile in pileEntities">{{pile.pileName}}</a-select-option>
					</a-select>
				</a-form-model-item>
			</a-form-model>
		</div>
		<div class="drawer-footer-box">
			<a-button type="primary" @click="saveSpear('spearEntity')">保存</a-button>
		</div>
	</a-drawer>
</template>

<script>
import {api, post} from "@/api/api";

export default {
	name: "AddSpear",
	props: {
		title: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			id: '',
			visible: false,
			spearEntity: {},
			stationEntities: [],
			pileEntities: [],
			rules: {
				power: [
					{required: true, message: "请填写充电功率", trigger: "blur",},
				],
				spearName: [
					{required: true, message: "请填写枪名称", trigger: "blur",},
				],
				spearNumber: [
					{required: true, message: "请填写枪编号", trigger: ["blur", "change"],},
				],
				stationId: [
					{required: true, message: "请选择所属电站", trigger: ["blur", "change"],},
				],
				pileId: [
					{required: true, message: "请选择所属桩体", trigger: ["blur", "change"],},
				],
			},
		}
	},
	methods: {
		show(id){
			if ( id ) {
				this.id = id
				// 编辑
				post(api.SpearSingle, {id: id}).then(res=>{
					this.spearEntity = res.data.data
				})
			}
			this.visible = true
			post(api.GetStationList, {}).then(res=>{
				this.stationEntities = res.data.data
			})
		},
		loadPile(stationId){
			post(api.GetPileList, {stationId: stationId}).then(res=>{
				this.pileEntities = res.data.data
			})
		},
		// 保存电站信息
		saveSpear() {
			this.$refs.spearEntity.validate ( ( valid ) => {
				if ( valid ) {
					let requestApi = this.id ? api.UpdateSpear : api.SaveSpear;
					post ( requestApi, this.spearEntity ).then ( ( res ) => {
						if ( res.data.code == "000000" ) {
							this.$message.success ( {
								content: `${this.id ? "修改" : "添加"}充电枪成功`,
							} );
							this.onClose()
							this.$emit('reloadList')
						} else {
							this.$message.error ( {
								content: res.data.message,
							} );
						}
					} ).catch ( ( err ) => {
						console.log ( err );
					} );
				} else {
					return this.$message.warning ( {
						content: "请填写完整信息",
					} );
				}
			} );
		},
		onClose() {
			this.$refs.spearEntity.resetFields ();
			this.visible = false
		},
	},
}
</script>

<style lang="less" scoped>
@import "../../../static/addStation";
</style>
